<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>login</title>
    <!-- 引入 layui.css -->
    <link rel="stylesheet" href="https://dns.lmwa.cn/npm/layui/2.6.8/css/layui.css">
    <style>
        #code {
            color: #1E9FFF;
            font-weight: bold;
            font-style: oblique;
            letter-spacing: 5px;
            font-size: 20px;
        }
    </style>
</head>
<body>
<div>
    <form class="layui-form">
        <div class="layui-form-item" onsubmit="return false">
            <label class="layui-form-label">用户名：</label>
            <div class="layui-input-inline">
                <input id="username" type="text" name="username" lay-verify="username" placeholder="请输入用户名"
                       autocomplete="off" class="layui-input">
            </div>
            <div class="layui-form-mid layui-word-aux" id="zz1"></div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">密码：</label>
            <div class="layui-input-inline">
                <input id="password" type="password" name="password" lay-verify="password" placeholder="请输入密码"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">验证码：</label>
            <div class="layui-inline">
                <input type="text" name="captcha" lay-verify="code" placeholder="请输入验证码" maxlength="4"
                       autocomplete="off"
                       id="ctl00_txtcode" class="layui-input">
            </div>
            <div class="layui-inline"><input type="button" id="code" class="layui-input"/></div>
        </div>

        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" type="button" id="submit" lay-submit lay-filter="formDemo">登录</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
<!--引入jquery-->
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- 引入 layui.js -->
<script src="https://dns.lmwa.cn/npm/layui/2.6.8/layui.js"></script>
<script type="text/javascript">
    var can_sumbit = true;//设置全局变量用来验证用户名为空后提交的判断
    $(function () {
        //产生验证码
        createCode();
        $("#code").click(function () {
            createCode();
        });
        var code; //在全局定义验证码
        function createCode() {
            code = "";
            var random = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R',
                'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z']; //随机数
            for (var i = 0; i < 4; i++) { //循环操作
                var index = Math.floor(Math.random() * 36); //取得随机数的索引（0~35）
                code += random[index]; //根据索引取得随机数加到code上
            }
            $("#code").val(code) //把code值赋给验证码
        }

        <!--引入form模块-->
        layui.use(['form', 'layer', 'jquery'], function () {

            $ = layui.jquery;
            var form = layui.form,
                layer = layui.layer;

            // 表单提交
            $("#submit").click(function () {
                can_sumbit = true;//重新点击后需要重新赋值，否则一直为false
                // 表单校验
                if ($("#username").val() == "") {
                    layer.msg("用户名不能为空");
                    can_sumbit = false;
                } else if (can_sumbit && $("#password").val() == "") {
                    layer.msg("密码不能为空");
                    can_sumbit = false;
                } else if (can_sumbit && $('#ctl00_txtcode').val() == "") {
                    layer.msg("请填写验证码");
                    can_sumbit = false;
                } else if (can_sumbit && $("#ctl00_txtcode").val().toUpperCase() != $("#code").val().toString()) {//将输入验证码转大写,实际验证码的类型转为字符串类型
                    createCode();//刷新验证码
                    layer.msg("验证码不正确");
                    can_sumbit = false;
                }
            //异步提交表单数据，分两个请求，第一个获取后端传入的token并存入本地，第二请求头携带token登录，第二没有直接登录感觉也是可以的
            if (can_sumbit) {
                var data = {
                    username: $("#username").val(),
                    password: $("#password").val()
                };
                $.ajax({
                    url: "/login",
                    data: JSON.stringify(data),
                    contentType: 'application/json',
                    type: "post",
                    success: function (result) {
                        if (result.ok == false) {
                            createCode();//刷新验证码
                            layer.msg(result.message);
                        } else if (result.ok == true) {
                            localStorage.setItem("token", result.data.token);
                            $.ajax({
                                url: "/getInfo",
                                type: "get",
                                headers: {"token": localStorage.getItem("token")},
                                success: function (result) {
                                    if (result.ok == true){
                                        location.href = "../index.html"
                                    }

                                }
                            })
                        }

                    }
                })
            } else {
                return false;
            }
        });
    });

    //异步请求是否存在该用户名
    $("#username").blur(function () {
        console.log($("#username").val())
        $.ajax({
            url: "/loginVerify",
            data: {"username": $("#username").val()},
            type: "get",
            success: function (result) {

                    $("#zz1").text(result.message);
            }
        })
    })
    });


</script>
</body>
</html>